<template>
  <div class="previewType">
    <Card
      :class="!item.noOnline ? 'online' : 'offline'"
      v-for="item in formTypeList"
      :key="item.type"
      :dis-hover="item.noOnline"
    >
      <div style="text-align:center;" @click="handleForm(item.formCategory)">
        <h3>{{ item.type }}</h3>
        <Icon :type="item.icon" size="60" :color="!item.noOnline ? 'var(--btn-primary-bg)' : '#b6b6b6'" />
        <h4>{{ item.tip }}</h4>
      </div>
    </Card>
  </div>
</template>

<script>
import applyCreateForm from '../createForm/applyForm/index.vue'
import rateCreateForm from '../createForm/rateForm/index.vue'
export default {
  data() {
    return {
      formTypeList: [
        { icon: 'ios-stats', type: '指标类表单', tip: '适用于数据收集', noOnline: true, formCategory: 'indicator' },
        { icon: 'ios-clipboard', type: '任务类表单', tip: '适用于任务跟踪', noOnline: true, formCategory: 'task' },
        { icon: 'ios-paper-outline', type: '申报类表单', tip: '适用于奖项申报', formCategory: 'apply' },
        { icon: 'ios-star', type: '评分评选类表单', tip: '适用于评分', formCategory: 'rating' }
      ]
    }
  },
  methods: {
    handleForm(formCategory) {
      // if (formCategory !== 'apply' || formCategory !== 'rating') return
      this.$emit('Close')
      const typeMapping = {
        apply: applyCreateForm,
        rating: rateCreateForm
      }
      console.log("---", typeMapping[formCategory])
      new this.$sidelipPage(
        typeMapping[formCategory],
        {
          props: {
            row: {},
            disabled: true,
            isPreview: true
          }
        }
      )
    }
  },
  created() {
    this.$emit('SetTitle', '表单模板预览')
    this.$emit('SetPageWidth', 800)
  }
}
</script>

<style lang="less" scoped>
.previewType {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  .online {
    margin: 10px;
    padding: 10px;
    flex: 0 0 45%;
    color: var(--btn-primary-bg);
    &:hover {
      cursor: pointer;
    }
  }
  .offline {
    padding: 10px;
    margin: 10px;
    flex: 0 0 45%;
    color: '#b6b6b6';
  }
}
</style>
